<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" type="text/css" href="${ctxPath}/plug-in/w2ui-1.4.3/w2ui-1.4.3.css" />
    <script src="${ctxPath}/js/jquery.min.js"></script>
    <script type="text/javascript" src="${ctxPath}/plug-in/w2ui-1.4.3/w2ui-1.4.3.js"></script>
</head>
<body>
    <div id="main" style="height: 800px"></div>
</body>
<script>
$(function () {
	var config = {
			layout: {
				name: 'layout',
				padding: 0,
				panels: [
                    { type: 'top', size: 100, resizable: true, minSize: 120 },
					{ type: 'left', size: 200, resizable: true, minSize: 120 },
					{ type: 'main', overflow: 'hidden', 
						style: 'background-color: white; border: 1px solid silver; border-top: 0px; padding: 10px;',
						tabs: {
							active: 'index',
							tabs: [{ id: 'index', caption: '首页' }],
							onClick: function (event) {
								//w2ui.layout.html('main', 'Active tab: '+ event.target);
							  },
							onClose: function (event) {
								this.click('index');
							}
						}
					}
				]
			},
		    grid1: {
		        name: 'grid1',
		        header: 'Grid 1',
		        show: {
		            header: true,
		            footer: true
		        },
		        style: 'padding: 0px',
		        columns: [
		            { field: 'recid', caption: "id", size: '100px' },
		            { field: 'title', caption: "text", size: '100%' }
		        ]
		    },
		    grid2: {
		        name: 'grid2',
		        header: 'Grid 2',
		        show: {
		            header: true,
		            footer: true
		        },
		        style: 'padding: 0px',
		        columns: [
		            { field: 'recid', caption: "id", size: '100px' },
		            { field: 'title', caption: "text", size: '100%' },
		            { field: 'title', caption: "text", size: '100%' }
		        ]
		    },
			sidebar: {
				name: 'sidebar',
				nodes: [ 
					    { id: 'general', text: '系统管理', group: true, style:'', expanded: false, 
				          nodes: [
								    { id: 'item1', text: 'Item 1', img: 'icon-page' },
								    { id: 'item2', text: 'Item 2', img: 'icon-page' },
								    { id: 'item3', text: 'Item 3', img: 'icon-page' },
								    { id: 'item4', text: 'Item 4', img: 'icon-page' }
					             ]
					    }
				],
				onClick: function (event) {
					var tabs = w2ui.layout_main_tabs;
					if (tabs.get(event.target)) {
						tabs.select(event.target);
						w2ui.layout.html('main', w2ui.grid2);
					} else {
						tabs.add({ id: event.target, caption: 'Tab '+ event.target, closable: true });
						w2ui.layout.html('main', w2ui.grid1);
					}
				}
			}
		}

		$(function () {
			
			
			// initialization
			$('#main').w2layout(config.layout);
			$().w2grid(config.grid1);
			$().w2grid(config.grid2);
			w2ui.layout.content('left', $().w2sidebar(config.sidebar));
			w2ui.layout.load('top', '/menu/edit');
		});
});
</script>
</html>